import { Form, Input, Select, Space, Card, Row, Col } from 'antd';

const labelStyle = {
  textAlign: 'right',
  lineHeight: '24px',
  fontSize: '12px',
  color: 'rgba(0, 0, 0, 0.85)',
  marginRight: '8px',
  whiteSpace: 'nowrap',
  width: '80px',
  flex: '0 0 80px',
};

const inputStyle = {
  width: '100%',
  height: '24px',
  fontSize: '12px',
  lineHeight: '24px',
};

const readOnlyTextStyle = {
  fontSize: '12px',
  lineHeight: '24px',
  color: 'rgba(0, 0, 0, 0.65)',
  backgroundColor: '#f5f5f5',
  padding: '0 8px',
  border: '1px solid #d9d9d9',
  borderRadius: '2px',
  minHeight: '24px',
  width: '120px',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
};

const readOnlyStyle = {
  ...inputStyle,
  backgroundColor: '#f5f5f5',
  border: 'none',
  color: 'rgba(0, 0, 0, 0.65)',
};

const formItemWrapperStyle = {
  display: 'flex',
  alignItems: 'center',
  minHeight: '24px',
  padding: '0 4px',
  margin: '4px 0',
};

const formItemStyle = {
  margin: 0,
  padding: 0,
};

const ProductInfo = () => {
  return (
    <Card title="SPU" bodyStyle={{ padding: '12px' }} style={{ fontSize: '12px', marginBottom: '16px' }}>
      <Form
        layout="vertical"
        initialValues={{
          isExport: '否',
          isExportCode: '否',
          is3C: '否',
          materialType: '标准成品',
          materialGroup: '商品',
          categoryCode: '420804',
        }}
        size="small"
      >
        <Row gutter={[16, 16]}>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>商品编码</Space>
              </div>
              <div style={readOnlyTextStyle} title="TD5F42080009">TD5F42080009</div>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>商品名称</Space>
              </div>
              <div style={readOnlyTextStyle} title="这是商品名称11">这是商品名称11</div>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>品牌</Space>
              </div>
              <Form.Item style={formItemStyle} name="brand">
                <Select placeholder="三方品牌" style={inputStyle}>
                  <Select.Option value="brand1">三方品牌</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>是否效期管理</Space>
              </div>
              <Form.Item style={formItemStyle} name="isExpiryManagement">
                <Select placeholder="否" style={inputStyle}>
                  <Select.Option value="yes">是</Select.Option>
                  <Select.Option value="no">否</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>

          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>保质期</Space>
              </div>
              <Form.Item style={formItemStyle} name="qualityPeriod">
                <Input placeholder="请输入正整数或长期" style={inputStyle} />
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>保质期单位</Space>
              </div>
              <Form.Item style={formItemStyle} name="qualityPeriodUnit">
                <Select placeholder="请选择" style={inputStyle}>
                  <Select.Option value="day">天</Select.Option>
                  <Select.Option value="month">月</Select.Option>
                  <Select.Option value="year">年</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>保修期</Space>
              </div>
              <Form.Item style={formItemStyle} name="warrantyPeriod">
                <Input placeholder="请输入" style={inputStyle} />
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>保修期单位</Space>
              </div>
              <Form.Item style={formItemStyle} name="warrantyPeriodUnit">
                <Select placeholder="请选择" style={inputStyle}>
                  <Select.Option value="day">天</Select.Option>
                  <Select.Option value="month">月</Select.Option>
                  <Select.Option value="year">年</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>

          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>三级分类名称</Space>
              </div>
              <Form.Item style={formItemStyle} name="categoryName">
                <Select placeholder="婴童玩具启蒙 / 积木 / 积木周边" style={inputStyle}>
                  <Select.Option value="cat1">婴童玩具启蒙 / 积木 / 积木周边</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>进口/国产</Space>
              </div>
              <Form.Item style={formItemStyle} name="importType">
                <Select placeholder="进口" style={inputStyle}>
                  <Select.Option value="import">进口</Select.Option>
                  <Select.Option value="domestic">国产</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>产地</Space>
              </div>
              <Form.Item style={formItemStyle} name="origin">
                <Select placeholder="请选择" style={inputStyle}>
                  <Select.Option value="china">中国</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>执行标准</Space>
              </div>
              <Form.Item style={formItemStyle} name="executionStandard">
                <Input placeholder="请输入" style={inputStyle} />
              </Form.Item>
            </div>
          </Col>

          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>三级分类编码</div>
              <div style={readOnlyTextStyle}>420804</div>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>是否外部型号</Space>
              </div>
              <Form.Item style={formItemStyle} name="isExternalModel">
                <Select placeholder="否" style={inputStyle}>
                  <Select.Option value="yes">是</Select.Option>
                  <Select.Option value="no">否</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>是否外部条码</Space>
              </div>
              <Form.Item style={formItemStyle} name="isExternalBarcode">
                <Select placeholder="否" style={inputStyle}>
                  <Select.Option value="yes">是</Select.Option>
                  <Select.Option value="no">否</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>
                <Space><span style={{color: '#ff4d4f'}}>*</span>是否3C</Space>
              </div>
              <Form.Item style={formItemStyle} name="is3C">
                <Select placeholder="否" style={inputStyle}>
                  <Select.Option value="yes">是</Select.Option>
                  <Select.Option value="no">否</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>

          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>商品简称</div>
              <div style={readOnlyTextStyle}>商品简称</div>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>英文名称</div>
              <div style={readOnlyTextStyle}>Product Name</div>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>物料类型</div>
              <div style={readOnlyTextStyle}>标准成品</div>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>物料组</div>
              <div style={readOnlyTextStyle}>商品</div>
            </div>
          </Col>

          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>商品系列</div>
              <Form.Item style={formItemStyle} name="productSeries">
                <Select placeholder="折叠" style={inputStyle}>
                  <Select.Option value="foldable">折叠</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>性别</div>
              <Form.Item style={formItemStyle} name="gender">
                <Select placeholder="女性" style={inputStyle}>
                  <Select.Option value="female">女性</Select.Option>
                  <Select.Option value="male">男性</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>季节</div>
              <Form.Item style={formItemStyle} name="season">
                <Select placeholder="秋季" style={inputStyle}>
                  <Select.Option value="spring">春季</Select.Option>
                  <Select.Option value="summer">夏季</Select.Option>
                  <Select.Option value="autumn">秋季</Select.Option>
                  <Select.Option value="winter">冬季</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>价位段</div>
              <Form.Item style={formItemStyle} name="pricePosition">
                <Select placeholder="9系" style={inputStyle}>
                  <Select.Option value="9">9系</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>

          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>商标</div>
              <Form.Item style={formItemStyle} name="trademark">
                <Select placeholder="bckid" style={inputStyle}>
                  <Select.Option value="bckid">bckid</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>商品等级</div>
              <Form.Item style={formItemStyle} name="productLevel">
                <Select placeholder="S+" style={inputStyle}>
                  <Select.Option value="splus">S+</Select.Option>
                  <Select.Option value="s">S</Select.Option>
                  <Select.Option value="a">A</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>所属部门</div>
              <Form.Item style={formItemStyle} name="department">
                <Select placeholder="耐用品产品事业部 / 电器" style={inputStyle}>
                  <Select.Option value="dept1">耐用品产品事业部 / 电器</Select.Option>
                </Select>
              </Form.Item>
            </div>
          </Col>
          <Col md={8} lg={6} style={{ minWidth: '250px' }}>
            <div style={formItemWrapperStyle}>
              <div style={labelStyle}>上市年份</div>
              <Form.Item style={formItemStyle} name="launchYear">
                <Input placeholder="请输入正整数，只能6位" style={inputStyle} />
              </Form.Item>
            </div>
          </Col>
        </Row>
      </Form>
    </Card>
  );
};

export default ProductInfo;
